import React, { Component } from "react";

// class Child extends Component {
//   render() {
//     console.log(this);
//     return <div>child - {this.props.children}</div>;
//   }
// }

const Child = (props) => {
  console.log(props);
  return (
    <div>
      {props.children.a} - child - {props.children.b}
    </div>
  );
};
class App extends Component {
  render() {
    return (
      <>
        <h3>插槽</h3>
        <Child>
          {/* <span>123</span>
          <span>456</span> */}
          {/* 具名插槽的写法是插入一个对象 */}
          {{
            a: <span>123</span>,
            b: <span>456</span>,
          }}
        </Child>
      </>
    );
  }
}

export default App;
